<template>
  <div class="play_container">
    <!-- :style="`background:url(${img}) no-repeat;`" -->
    <div
      class="bg_img"
      :style="`background-image:url(${img});background-position: center center;background-size: 100% 100%;background-repeat:no-repeat;`"
    >
      <img src="" alt="" />
    </div>
    <div class="wrap">
      <top-open></top-open>
      <div class="play">
        <div class="none">
          <audio
            :src="playPath"
            controls
            loop
            ref="audio"
            @canplay="myCanPlay"
            @timeupdate="myTimeupdate"
            @ended="myEnd"
          ></audio>
        </div>
        <div class="tt_play">
          <div class="top">
            <a  @click="prevFoo" :class="['prev', prev == undefined ? 'kong':'']"
              ><i class="font_family icon-shangyishou"></i>
            </a>
            <div class="play_icon">
              <img :src="img" alt="" />
              <div class="count"><i class="font_family icon-Headset-2"></i> {{ playCount | getCount}}</div>
              <div class="py" @click="clickPlay">
                <van-icon name="pause-circle-o" v-if="isPlay" />
                <van-icon name="play-circle-o" v-else />
              </div>
            </div>
            <a  @click="nextFoo" :class="['next', next == undefined ? 'kong':'']"
              ><i class="font_family icon-xiayishou"></i>
            </a>
          </div>

          <div class="title">
            <span>{{ title }}</span>
          </div>

          <div class="download">
            <span class="load">倍速播放</span>
            <span class="speed">下载倍速</span>
            <div class="collect">
              <van-icon name="star-o" />
              <!-- <van-icon name="star" /> -->
            </div>
          </div>

         
          <div class="bottom">
            <div class="bar" @click="clicklocation">
              <ul class="pp" ref="ul">
                <li :style="`width:${distance}px;`">
                  <div
                    class="dot"
                    @touchstart="start"
                    @touchmove="move"
                    @touchend="end"
                  >
                    <span></span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="num">
              <span class="start">{{ cur | getTime }}</span>
              <span class="end">{{ duration | formatTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <shou-open></shou-open>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Play",
  data() {
    return {
      distance: 0, // 进度条
      istouch: false,
      cur: 0,
      dur: 0,
      isPlay: false,
    };
  },
  filters: {
    getTime(val) {
      let v1 = Math.floor(val);

      let hh = parseInt(val / 60 / 60);
      let mm = parseInt((val / 60) % 60);
      let ss = parseInt(val % 60);

      hh = hh < 10 ? "0" + hh : hh;
      ss = ss < 10 ? "0" + ss : ss;
      mm = mm < 10 ? "0" + mm : mm;
      let str = ``;
      if (hh == "00") {
        str = `${mm}:${ss}`;
      } else {
        str = `${hh}:${mm}:${ss}`;
      }

      return str;
    },
  },
  props: {
    id: {
      type: Number,
    },
    title: {
      type: String,
    },
    img: {
      type: String,
    },
    playPath: {
      type: String,
    },
    duration: {
      type: Number,
    },
    next: {
      type: String,
    },
    prev: {
      type: String,
    },
    playCount:{
      type:Number
    }
    
  },
  watch: {
    cur(val) {
      this.distance = (val / this.dur) * this.$refs.ul.offsetWidth;
    },
  },
  methods: {
    clickPlay() {
      if (this.isPlay) {
        this.$refs["audio"].pause();
      } else {
        ;
        if(this.playPath == "" || this.playPath == undefined){
          Toast.fail("会员付费收听")
          return
        }else{
          this.$refs["audio"].play()
        }
      }

      this.isPlay = !this.isPlay;
    },
    myCanPlay() {
      // 获取总的时间
      if (this.$refs["audio"]) {
        this.dur = this.$refs["audio"].duration;
      }
    },
    myTimeupdate() {
      // 获取当期的时间
      if (this.$refs["audio"]) {
        this.cur = this.$refs["audio"].currentTime;
      }
    },
    clicklocation(e) {
      this.distance = e.pageX - this.$refs.ul.offsetLeft;
      this.$refs["audio"].currentTime =
        (this.distance / this.$refs.ul.offsetWidth) * this.dur;
      this.cur = this.$refs["audio"].currentTime;
    },
    nextFoo() {
      if (this.next) {
        this.$router.replace(this.next).catch((err) => {
          console.log("输出错误");
        });

        this.$router.go(0);
      } else {
        Toast.fail("最后一首了");
        return;
      }
    },
    prevFoo() {
      if (this.prev) {
        this.$router.replace(this.prev).catch((err) => {
          console.log("输出错误");
        });

        this.$router.go(0);
      } else {
        Toast.fail("已经是第一首了");
        return;
      }
    },

    myEnd() {
      console.log("播放完成");
    },
    start() {
      this.istouch = true;
    },
    move(e) {
      if (this.istouch) {
        let width = this.$refs.ul.offsetLeft;
        let x = e.targetTouches[0].pageX - width;

        if (x > this.$refs.ul.offsetWidth) {
          x = this.$refs.ul.offsetWidth;
        }

        this.distance = x;

        // 设置播放的位置

        this.$refs["audio"].currentTime =
          (x / this.$refs.ul.offsetWidth) * this.dur;
        this.cur = (x / this.$refs.ul.offsetWidth) * this.dur;
        // console.log(a)
      }
    },
    end() {
      this.istouch = false;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.play_container {
  width: 100%;
  height: 480px;

  position: relative;
  overflow: hidden;
  .bg_img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 300%;
    height: 300%;
    z-index: 0;
    // // background: url("https://imagev2.xmcdn.com/group31/M07/0E/5B/wKgJX1mAQg2SWaYDAAAw0CICWi8444.jpg!op_type=3&columns=144&rows=144&magick=webp")
    // //   no-repeat;
    // background-position: center center;
    // background-size: 100% 100%;
    filter: blur(50px);
  }
  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 12;
    .play {
      margin: 50px 0 7px;
      width: 100%;
      position: relative;
      height: 300px;
      //   background-color: pink;
      .none {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 0;
        display: none;
      }
      .tt_play {
        padding-top: 25px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        .top {
          height: 130px;
          display: flex;
          justify-content: center;
          .play_icon {
            width: 130px;
            height: 130px;
            margin: 0 26px;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            > img {
              width: 100%;
              height: 100%;
            }
            .count {
              position: absolute;
              bottom: 0;
              right: 0;
              left: 0;
              text-align: right;
              padding: 4px 10px 4px 25px;
              font-size: 12px;
              line-height: 1.42;
              font-weight: 700;
              color: #fff;
              background-image: -webkit-gradient(
                linear,
                left top,
                right top,
                from(rgba(0, 0, 0, 0)),
                to(rgba(0, 0, 0, 0.25))
              );
              background-image: -o-linear-gradient(
                left,
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0.25) 100%
              );
              background-image: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0.25) 100%
              );
            }

            .py {
              font-size: 65px;
              position: absolute;
              top: 50%;
              left: 50%;
              color: #fff;
              transform: translate(-50%, -50%);
            }
          }
          .prev,
          .next {
            // display: block;
            line-height: 130px;
            color: #fff;
            font-size: 25px;
            >i{
              
              font-size: 25px;
            }
          }
          .prev.kong i{
            color: #90939c !important;
          }
          .next.kong i{
            color: #90939c !important;
          }
        }
        .title {
          height: 84px;
          font-size: 20px;
          text-align: center;
          color: #fff;
          padding: 20px 15px 12px;
          span {
            display: -webkit-box;

            -webkit-box-orient: vertical;

            -webkit-line-clamp: 2;

            overflow: hidden;
          }
        }
        .download {
          position: relative;
          display: flex;
          justify-content: center;
          span {
            display: inline-block;
            padding: 2px 7px;
            background: rgba(65, 65, 65, 0.5);
            border: 1px solid #ffdf00;
            border-radius: 100px;
            font-size: 11px;
            color: #ffdf00;
            margin: 0 5px;
          }
          .collect {
            position: absolute;
            right: 25px;
            color: #fff;
            top: 50%;
            transform: translateY(-50%);
            font-size: 25px;
          }
        }
        .bottom {
          padding: 0 35px;
          .bar {
            height: 25px;
            display: flex;
            align-items: center;
            .pp {
              width: 100%;

              height: 2px;
              background-color: #fff;
              border-radius: 1px;
              li {
                height: 100%;
                width: 0;
                background-color: #f86442;
                position: relative;
                .dot {
                  background-color: rgba(255, 255, 255, 0.3);
                  display: block;
                  width: 22px;
                  height: 22px;

                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  right: -11px;
                  border-radius: 50%;
                  padding-top: 3.5px;
                  padding-left: 3.5px;
                  span {
                    display: block;
                    height: 15px;
                    width: 15px;
                    border-radius: 50%;
                    background-color: #fff;
                  }
                }
              }
            }
          }

          .num {
            // margin-top: 2px;
            display: flex;
            justify-content: space-between;
            span {
              font-size: 12px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>

